<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge"><!--ie使用edge渲染模式-->
    <meta name="renderer" content="webkit"><!--360渲染模式-->
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1.0, user-scalable=no">
    <title>托管费用</title>
    <link rel="stylesheet" href="../../css/basic.css">
    <style type="text/css">
        /*以下为支付弹框*/
        .pwd-box{
            height: 1rem;
            margin: auto;
            width: 99%;
            padding-left: 1px;
            position: relative;
            overflow: hidden;
        }
        .pwd-box input[type="tel"]{
            width: 99%;
            height: 0.8rem;
            color: transparent;
            position: absolute;
            top: 0;
            left: 0;
            border: none;
            font-size: 0.25rem;
            opacity: 0;
            z-index: 1;
            letter-spacing: 0.636rem;
        }
        .fake-box input{
            border-bottom: 1px solid black;
            float: left;
            z-index: 99999;
            width: 0.8rem;
            height: 0.8rem;
            border-right: 1px solid black;
            text-align: center;
            font-size: 0.25rem;
            border-top: 1px solid black;
        }
        .fake-box input:first-child{
            border-top-left-radius: 0.2rem;
            border-left: 1px solid black;
            border-bottom-left-radius: 0.2rem;
        }
        .fake-box input:last-child{
            border-top-right-radius: 0.2rem;
            border-right: 1px solid black;
            border-bottom-right-radius: 0.2rem;
        }
        .hide{display: none}
        .body-area{
            z-index: 999999;
            position: fixed;
            width: 378px;
            height: 566px;
            background-color: black;
            opacity: 0.5;
            top: 0;
        }
        .pwd-area{
            width: 100%;
            height: 100%;
            position: absolute;
            padding-top: 1rem;
            top: 0rem;
        }
        .pwd-input-area{
            text-align: center;
            width: 6rem;
            height: 3rem;
            margin: auto;
            background-color: white;
            margin-top: 1rem;
            position: relative;
        }
        .inputPwdArea{
            line-height: 1rem;
            font-size: 0.28rem}
        .fake-box{
            height: 0.9rem;
            width: 5rem;
            position: relative;
            margin: auto;
        }
        .prompt-error{
            color: #F23A38;
            line-height: 1rem;
            font-size: 0.28rem;
        }
        /*以下为主页*/
        .pay-info-area{
            padding-top: 0.5rem;
            height: auto;
            width: 90%;
            margin: auto;
        }
        .pay-ul ul{
            /*background-color: #00a0e9;*/
        }
        .pay-ul li{
            position: relative;
            height: 1.2rem;
            width: 100%;
            border-bottom: 1px solid #e3e3e3;
        }
        .li-type{
            line-height: 1.6rem;
            display: block;
            color: #363636;
            font-size: 0.28rem;
            height: 100%;
            width: 18%;
            left: 0;
        }
        .input-area{
            color: #666;
            background-color: transparent;
            font-size: 0.28rem;
            width: 76%;
            position: absolute;
            right: 0;
            bottom: 0.15rem;
            height: 0.5rem;
            padding-left: 6%;
            outline: none;
        }
        .agreement a{
            position: absolute;
            left: 0.5rem;
            top: 0.1rem;
            color: #666;
            font-size: 0.28rem;
        }
        .addMoney-btn-area{
            width: 50%;
            height: 0.8rem;
            margin: 0.8rem auto;
        }
        .addMoney-btn{
            height: 100%;
            width: 100%;
            background-color: #F23A38;
            border-radius: 10px;
            outline: none;
            color: white;
            font-size: 0.28rem;
        }
        .hidePayArea{display: none}
        /*以下为优惠券*/
        .cunPonList{
            padding-top: 0.3rem;
            width: 100%;
            height:auto;
            overflow: hidden;
            padding-bottom: 0.3rem;
        }
        .cunPonList li{
            float: left;
            width: 36%;
            margin: 0 6%;
            height:1.2rem;
            border: 1px solid  #ADADAD;
            position: relative;
        }
        .used,.use{
            width: 100%;
            height: 100%;
            position: relative;
            display: inline-block;
        }
        .used{color: #363636;}
        .use{color: #F23A38}
        .use .try-cunPon{background-color: #F23A38}
        .use .money-type{left: 0.1rem}
        .use .money-num{left: 0.3rem}
        .money-type{
            font-size: 0.25rem;
            position: absolute;
            bottom: 0.3rem;
            left: 0.2rem;
        }
        .money-num{
            position: absolute;
            font-size: 0.7rem;
            bottom: 0.18rem;
            left: 0.5rem;
        }
        .try-cunPon{
            padding: 0 0.1rem;
            background-color: #363636;
            color: white;
            font-size: 0.25rem;
            position: absolute;
            right: 0.3rem;
            top: 0.2rem;
        }
        .font-cunPon{
            position: absolute;
            bottom: 0.3rem;
            font-size: 0.23rem;
            right: 0.3rem;
        }
    </style>
    <script src="../../lib/basicSize.js"></script>
</head>
<body>
<!--导航-->
<div class="top-nav-area">
    <ul>
        <a class="back-a" href="javascript:history.back(-1)"></a>
        <li>托管费用</li>
    </ul>
</div>
<div class="main-body-area">
    <div class="pay-info-area">
        <ul class="pay-ul">
            <li>
                <span class="li-type">托管金额</span>
                <input class="input-area" readonly type="text" value="100.00">
            </li>
            <li>
                <span class="li-type">实际支付</span>
                <input class="input-area" readonly type="text" value="90.00">
            </li>
            <li style="border-bottom: none;">
                <span class="li-type" style="width: 100%">可用优惠券</span>
            </li>
        </ul>
    </div>
    <ul class="cunPonList">
        <li>
            <a href="#" class="used">
                <span class="money-type">￥</span>
                <span class="money-num">5</span>
                <span class="try-cunPon">点击使用</span>
                <span class="font-cunPon">无门槛优惠</span>
            </a>
        </li>
        <li>
            <a href="#" class="use">
                <span class="money-type">￥</span>
                <span class="money-num">10</span>
                <span class="try-cunPon">点击使用</span>
                <span class="font-cunPon">无门槛优惠</span>
            </a>
        </li>
    </ul>
    <div class="addMoney-btn-area">
        <button class="addMoney-btn">托管</button>
    </div>
</div>
<!--主体-->
<div class="controlPay hidePayArea" style="position: absolute;top: 0">
    <div class="body-area" style="z-index: 10"></div>
    <div class="pwd-area" style="z-index: 100">
        <div class="pwd-input-area">
            <span class="inputPwdArea">请输入钱包密码</span>
            <div class="pwd-box">
                <input type="tel" maxlength="6" class="pwd-input" id="pwd-input">
                <div class="fake-box">
                    <input type="password" readonly="">
                    <input type="password" readonly="">
                    <input type="password" readonly="">
                    <input type="password" readonly="">
                    <input type="password" readonly="">
                    <input type="password" readonly="">
                </div>
            </div>
            <span class="prompt-error">输入错误，请重新输入</span>
        </div>

    </div>
</div>
<script src="../../lib/jquery/jquery.min.js"></script>
<script src="../../lib/check/jquery-1.7.2.min.js"></script>
<script>
    $(document).ready(function () {
        $('.body-area').css('width', $(window).width() + 'px')
            .css('height', $(window).height() + 'px')
            .css('background-color','black').css('opacity','0.5');
        $('.controlPay').css('width', $('.body-area').width() + 'px')
            .css('height', $('.body-area').height() + 'px')
        $(window).resize(function() {
            $('.body-area').css('width', $(window).width() + 'px')
                .css('height', $(window).height() + 'px');
            $('.controlPay').css('width', $('.body-area').width() + 'px')
                .css('height', $('.body-area').height() + 'px')
        });
//        document.documentElement.style.overflow = "hidden";禁止滚动
        $('.addMoney-btn').click(function () {
            $('.controlPay').removeClass('hidePayArea')
        })
//        $(".controlPay").hide();
    })
</script>
<script>
    var $input = $(".fake-box input");
    $("#pwd-input").on("input", function() {
        var pwd = $(this).val().trim();
        for (var i = 0, len = pwd.length; i < len; i++) {
            $input.eq("" + i + "").val(pwd[i]);
        }
        $input.each(function() {
            var index = $(this).index();
            if (index >= len) {
                $(this).val("");
            }
        });
        if (len == 6) {
            //执行其他操作
            alert("success 密码正确")
            window.location.reload();
        }
    });
</script>
</body>
</html>